<template>
  <div>
    <page-list :x-uri="uri" :doactions="doactions" :custom-components="custom" :tree="true">
      <!-- 自定义tab -->
      <template v-slot:page-tabs>
        <tabs :tabs="tabs" />
      </template>
      <!-- 页面操作按钮 -->
      <template v-slot:page-button>
        <el-button v-auth="'exam.module.config'" size="mini" type="primary" @click="create">新建配置</el-button>
      </template>
    </page-list>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" :close-on-click-modal="false" top="30vh">
      <el-form v-if="dialogVisible" ref="point" :model="point" label-width="150px">
        <el-form-item v-if="cateVisible" :rules="rulesCate" label="分类">
          <el-cascader v-model="cateValue" :options="category" :props="{ expandTrigger: 'hover'}" clearable @change="handleChange" />
        </el-form-item>
        <el-form-item prop="title" :rules="rulesTitle" size="small" label="名称">
          <edu-input key="title" :value.sync="point.title" :args="{ minlength: 2, maxlength: 30 }" />
        </el-form-item>
        <!-- <el-form-item prop="point_limit" size="small" label="知识点数量限制">
          <edu-input-number key="point_limit" :value.sync="point.point_limit" :args="{ min: 1, max: 20 }" />
        </el-form-item>
        <el-form-item prop="question_limit" size="small" label="出题数量限制">
          <edu-input-number key="question_limit" :value.sync="point.question_limit" :args="{ min: 1, max: 50 }" />
        </el-form-item> -->
        <el-form-item size="small">
          <el-row type="flex" justify="end">
            <el-button type="primary" :disabled="disableSubmit" @click="onSubmit">保存</el-button>
            <el-button @click="dialogVisible = false">关闭</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import PageList from '@public/template/page_list.vue';
import EduInput from '@public/form/input.vue';
// import EduInputNumber from '@public/form/input_number.vue';
import Tabs from '../tabs';
import PointStatus from './components/point_status.vue';
export default {
  components: {
    PageList,
    EduInput,
    // EduInputNumber,
    Tabs
  },
  inject: ['reload'],
  data() {
    return {
      uri: '/exam/admin/module/' + this.$route.params.id + '/point/config',
      tabs: [
        {
          title: '知识点配置',
          uri: '/exam/module/' + this.$route.params.id + '/point/config',
          meta: {
            permission: 'exam.module.config'
          }
        }
      ],
      doactions: [{ title: '编辑', callback: this.edit }, { title: '删除', callback: this.delete }],
      dialogVisible: false,
      dialogTitle: '',
      cateVisible: false,
      category: [],
      cateValue: [],
      disableSubmit: false,
      point: {
        title: '',
        // point_limit: 1,
        // question_limit: 1,
        category: []
      },
      rulesCate: [{ required: true }],
      rulesTitle: [
        { required: true, message: '名称必须填写', trigger: ['blur', 'change'] },
        {
          pattern: /^.{1,50}$/,
          message: '名称为1-50个字符',
          trigger: ['blur', 'change']
        }
      ],
      custom: {
        status: PointStatus
      }
    };
  },
  created() {
    this.loadCate();
  },
  methods: {
    loadCate: function() {
      var uri = '/exam/admin/category/tree';
      this.$http.send(
        'GET',
        uri,
        {},
        res => {
          this.category = res.data;
        },
        err => {
          this.$message.error(err.msg);
        },
        false
      );
    },
    handleChange: function(value) {
      this.cateValue = value;
      this.point.category = value;
    },
    // 新建顶级知识点
    create: function() {
      this.point = {
        title: '',
        // point_limit: 1,
        // question_limit: 1,
        category: this.cateValue
      };
      this.dialogVisible = true;
      this.dialogTitle = '新建配置';
      // 显示分类
      this.cateVisible = true;
    },
    // 编辑
    edit: function({ row }) {
      this.dialogVisible = true;
      this.dialogTitle = '编辑配置';
      // 显示分类
      this.cateVisible = true;
      this.cateValue = row.fullcategorypath;
      this.point = {
        id: row.id,
        title: row.title,
        // point_limit: row.point_limit,
        // question_limit: row.question_limit,
        category: row.fullcategorypath
      };
    },
    // 保存
    onSubmit: function() {
      console.log(this.point);
      if (this.point.category && !this.point.category.length) {
        this.$message.error('请选择分类');
      } else {
        this.$refs['point'].validate(valid => {
          if (valid) {
            this.disableSubmit = true;
            var method = 'POST';
            var uri = '/exam/admin/module/' + this.$route.params.id + '/point/create';

            if (this.point.id) {
              method = 'PUT';
              uri = '/exam/admin/module/' + this.$route.params.id + '/point/edit';
            }
            this.$http.send(
              method,
              uri,
              this.point,
              response => {
                this.$message.success(response.msg, _ => {
                  this.reload();
                });
              },
              error => {
                this.disableSubmit = false;
                this.$message.error(error.msg);
              },
              false
            );
          }
        });
      }
    },
    // 删除
    delete: function({ row }) {
      this.$box
        .confirm('确认删除吗')
        .then(() => {
          this.$http.delete(
            '/exam/admin/module/' + this.$route.params.id + '/point/' + row.id + '/delete',
            {},
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    }
  }
};
</script>
